<template>
    <view class="content">
        <u-transition :show="show" mode="fade" duration="100">
            <view class="propTop">
                <view class="flex jcsb">
                    <view class="title">已选商品</view>
                    <view class="close" @click="clearBuy">清空</view>
                </view>
                <view class="scrollShop">
                    <scroll-view scroll-y>
                        <carBuyBox></carBuyBox>
                    </scroll-view>
                </view>
            </view>
        </u-transition>
        <view class="box">
            <view class="flex">
                <view class="carIcon" hover-class="iconHover" hover-stay-time="50" @click="showBuy" v-if="!payType">
                    <u-icon name="shopping-cart" size="28"></u-icon>
                    <view class="badge" v-if="carStore.count">{{ carStore.count }}</view>
                </view>
                <view class="money">
                    合计
                    <text class="fwb mgl10">{{ priceFrom(carStore.total) || 0 }}</text>
                </view>
            </view>
            <view>
                <u-button text="支付" class="buyBtn" :class="carStore.count ? '' : 'desable'" v-if="!payType" @click="topage('/pages/shop/payPage')"></u-button>
                <u-button text="选好了" class="buyBtn" v-else :disabled="!payState" @click="payIt"></u-button>
            </view>
        </view>

        <view class="iosSafe"></view>
    </view>
    <u-overlay :show="show" @click="show = false" z-index="20" duration="0"></u-overlay>
    <view class="safe"></view>
</template>

<script setup>
import carBuyBox from '../carBuyBox/carBuyBox.vue';
import { priceFrom } from '../../utils/tools.js';
import { ref } from 'vue';
import { useCounterStore } from '../../stores/shop/car';
const show = ref(false);
defineProps({
    dataList: {
        type: Array,
        default: []
    },
    payType: {
        type: Boolean,
        default: false
    },
    payState: {
        type: Boolean,
        default: false
    }
});
const emits = defineEmits(['toPay']);

let carStore = useCounterStore();
const showBuy = () => {
    show.value = !show.value;
};
const topage = (url) => {
    uni.navigateTo({
        url
    });
};
//清空购物车
const clearBuy = () => {
    carStore.clearCar();
};
//去结账
const payIt = () => {
    emits('toPay');
};
</script>

<style lang="scss" scoped>
.safe {
    height: 100rpx;
}

.content {
    // height: 100rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 99;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
}

.propTop {
    padding: 20rpx 30rpx;
    margin: 10rpx;
    border-bottom: 1px solid $uni-text-color-disable;

    .title {
        font-size: $uni-font-size-base;
        color: $uni-color-grey;
    }

    .close {
        font-size: $uni-font-size-base;
        color: $uni-color-primary;
    }

    .scrollShop {
        height: 450rpx;
        overflow: hidden;
        overflow-y: scroll;
        margin-top: 20rpx;

        .item {
            transform: scale(0.6);
        }
    }
}

.box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    z-index: 100;
    box-sizing: border-box;
    padding: 0 20rpx;

    .money {
        font-size: $uni-font-size-lg;
        display: flex;
        align-items: center;
    }

    .buyBtn {
        background-color: $uni-color-error;
        color: #fff;
        margin-right: 20rpx;

        &.desable {
            opacity: 0.5;
        }
    }

    .carIcon {
        position: relative;
        background-color: $uni-border-color;
        padding: 5rpx;
        border-radius: 10rpx;
        margin: 10rpx 20rpx;

        .badge {
            position: absolute;
            background-color: red;
            color: #fff;
            right: -18rpx;
            top: -18rpx;
            font-size: 22rpx;
            width: 36rpx;
            height: 36rpx;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-content: center;
        }
    }

    .iconHover {
        transform: scale(0.9);
    }

    .iosSafe {
        width: 100%;
        height: env(safe-area-inset-bottom);
    }
}
</style>
